<template>
	<div class="border-1px border-#E5E6EB border-solid rounded-12px p-20px flex items-center justify-between">
		<div class="mr-100px">
			<p class="text-20px text-#000000 mb-20px font-bold">资产分布</p>
			<div class="flex items-center">
				<div class="mr-100px">
					<div class="flex items-center mb-10px">
						<p class="bg-#F34E5F w-10px h-10px mr-10px"></p>
						<p class="text-14px text-#000000">可用余额（USDT)</p>
					</div>
					<p class="ml-20px font-bold text-20px">0.00</p>
				</div>
				<div>
					<div class="flex items-center mb-10px">
						<p class="bg-#A173FA w-10px h-10px mr-10px"></p>
						<p class="text-14px text-#000000">可用余额（USDT)</p>
					</div>
					<p class="ml-20px font-bold text-20px">0.00</p>
				</div>
			</div>
			<div class="mt-20px">
				<el-button color="#114CEE" style="width:80px;height:40px">划转</el-button>
			</div>
		</div>
		<!-- 扇形图 -->
		<div class='w-60% h-220px relative'>
			<div ref="chartDom" class="w-100% h-full">
			</div>
			<div class="absolute top-0 text-12px text-center
			left-50% top-50% translate-x--1/2 translate-y--1/2">
				<p>总资产(USDT)</p>
				<p class="font-bold mt-4px">0.00</p>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartDom = ref<any>(null);

// 饼图配置
const option = {
	color:['#F34E5F','#2CB4E7','#A173FA','#FC75D2'],
	grid: {
		bottom: 0,
		right: 0,
		left: 0,
		top: 0
	},
	series: [
		{
			name: 'Access From',
			type: 'pie',
			radius: ['50%', '80%'],
			avoidLabelOverlap: false,
			padAngle: 5,
			itemStyle: {
				borderRadius: 0
			},
			label: {
				show: false,
				position: 'center'
			},
			labelLine: {
				show: false
			},
			data: [
				{ value: 1048, name: 'Search Engine' },
				{ value: 735, name: 'Direct' },
				{ value: 580, name: 'Email' },
				{ value: 484, name: 'Union Ads' }
			]
		}
	]
};
// 样式
onMounted(() => {
	const myChart = echarts.init(chartDom.value);
	option && myChart.setOption(option);
});
</script>
